<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
		xmlns:x2="http://www.w3.org/TR/xhtml2"
		xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
		xmlns:state="http://www.w3.org/2005/07/aaa">
<head>
<title>Yahoo! UI Library - Slider Widget</title>
<link rel="stylesheet" type="text/css" href="css/screen.css" ></link>

<!-- Nav and logger start -->

<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="../../build/event/event-min.js" ></script>
<script type="text/javascript" src="../../build/dom/dom-min.js" ></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js" ></script>
<script type="text/javascript" src="../../build/logger/logger-min.js" ></script>
<script type="text/javascript" src="../../build/animation/animation.js" ></script>
<script type="text/javascript" src="js/color.js" ></script>
<script type="text/javascript" src="js/key.js" ></script>

<script type="text/javascript" src="../../build/slider/slider-debug.js" ></script></head>
<body> 
<div id="pageTitle"><h3>Slider Widget</h3></div> 

<div id="container">
  <div id="containerTop">
    <div id="header"><img id="ylogo" src="img/logo.gif" /></div>
	<div id="main">

		<!-- Nav and logger start -->

<style type="text/css">
    #logButtonHeader input { font-size: 80% }

/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */


</style>

<div id="rightbar">
  <div id="rightBarPad">
    <h3>Links</h3>
    <div id="linkage">
        <ul>
        <li><a href="index.html?mode=dist">Basic Sliders</a></li>
        <li><a href="basic.html?mode=dist">Scale Factor</a></li>
        <li><a href="rgb.html?mode=dist">RGB Slider</a></li>
        <li><a href="rgb2.html?mode=dist">Color Picker</a></li>
        <!--
        <li><a href="slider.html?mode=dist">All on one page</a></li>
        -->
        </ul>
    </div> 


    <script type="text/javascript">

    //<![CDATA[
    YAHOO.example.logApp = function() {
        return {
            init: function() {
                if (YAHOO.widget.Logger) {
                    var reader = new YAHOO.widget.LogReader( "logDiv", 
                            { newestOnTop: true, height: "400px" } );

                    reader._onClickPauseBtn(null, reader);
                }
            }
        };
    } (); 

    YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
    //]]>
    </script>

    <div id="logDiv"></div>

  </div>
</div>
<!-- Nav and logger end -->
 

		<div id="content"> 
		  <div class="newsItem"> 
			<h3>Sliders</h3>
			  <p>
				The slider widget is an implementation of YAHOO.util.DragDrop 
				It also will use YAHOO.util.Animation if available to
				animate the movement of the thumb when you click the 
				slider background.

				The only difference between the two sliders aside from
				the fact that one is vertical and one horizontal is that 
				the horizontal slider implements the "tick mark" feature
				of drag and drop; it will "snap" to the tick marks spaced
				25 pixels apart.
			  </p>
<strong>The logger is paused for performance reasons.  Click "Resume" to re-enable it.</strong>

              <div id="vertWrapper">
                <div id="vertBGDiv" tabindex="0" x2:role="role:slider" state:valuenow="0" state:valuemin="0" state:valuemax="200" title="Vertical Slider" >
                   <div id="vertHandleDiv"><img alt="" src="img/vertSlider.png" /></div> 
                </div>

                <div id="vertValueDiv">
                  <form name="formV" onsubmit="return YAHOO.example.Sliders.updateVert()">
                  <input autocomplete="off" name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
                  <input type="button" value="Update" onclick="YAHOO.example.Sliders.updateVert()" />
                  </form>
                </div>
              </div>
 
           <div id="horizWrapper">
             <div id="horizBGDiv" tabindex="0" x2:role="role:slider" state:valuenow="0" state:valuemin="-100" state:valuemax="100" title="Horizontal Slider" >
               <div id="horizHandleDiv" ><img alt="" src="img/horizSlider.png" /></div> 
              </div> 

            <div id="horizValueDiv">
                <form name="formH" onsubmit="return YAHOO.example.Sliders.updateHoriz()">
                <input autocomplete="off" name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
                <input type="button" value="Update" onclick="YAHOO.example.Sliders.updateHoriz()" />
                </form>
            </div>

     
		</div> 

    </div>
  </div>
</div>


<script type="text/javascript">
//<![CDATA[

YAHOO.example.Sliders = function() {

    var Dom = YAHOO.util.Dom;
    var Event = YAHOO.util.Event;

    var yslider, xslider;

    function handleHorizSliderKey(e) {
        YAHOO.log("horizontal slider keypress");

        var valueNow = xslider.getValue();
        var valueMin = xslider.thumb.rightConstraint;
        var valueMax = xslider.thumb.leftConstraint;
        var delta = 0;
        var kc = Event.getCharCode(e);

        YAHOO.log("keycode: " + kc);

        if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
            delta = -25;
        } else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
            delta = 25;
        } else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
            delta = -( valueNow - valueMin );
        } else if (kc == YAHOO.util.Key.DOM_VK_END) {
            delta = valueMax - valueNow;
        } else {
            return true;
        }
        
        valueNow += delta;

        var sliderBg = Dom.get("horizBGDiv");
        if (sliderBg.setAttributeNS) {
            sliderBg.setAttributeNS("http://www.w3.org/2005/07/aaa", 
                                    "valuenow", valueNow);
        }
        
        Event.stopEvent(e);
        return false;
    }

    function handleVertSliderKey(e) {
        YAHOO.log("vertical slider keypress");
        var valueNow = yslider.getValue();
        var valueMin = yslider.thumb.topConstraint;
        var valueMax = yslider.thumb.bottomConstraint;

        var delta = 0;
        var kc = Event.getCharCode(e);
        if (kc == YAHOO.util.Key.DOM_VK_UP) {
            delta = -20;
        }
        else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
            delta = 20;
        }
        else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
            delta = -( valueNow - valueMin );
        }
        else if (kc == YAHOO.util.Key.DOM_VK_END) {
            delta = valueMax - valueNow;
        }
        else {
            return true;
        }
        
        valueNow += delta;
        if (valueNow < valueMin) {
            valueNow = valueMin;
        }

        if (valueNow > valueMax) {
            valueNow = valueMax;
        }  

        var sliderBg = Dom.get("vertBGDiv");
        if (sliderBg.setAttributeNS) {
            sliderBg.setAttributeNS("http://www.w3.org/2005/07/aaa", 
                                    "valuenow", valueNow);
        }
        
        Event.stopEvent(e);
        return false;
    }

    var initVert = function() {

        var bg="vertBGDiv",thumb="vertHandleDiv",valFld="vertVal";

        yslider = YAHOO.widget.Slider.getVertSlider(bg, 
                         thumb, 0, 200);

        yslider.subscribe("change", function(offsetFromStart) {
                if (this.moveComplete) {
                    //alert("moveComplete");
                }
                Dom.get(valFld).value = offsetFromStart;
                Dom.get(bg).title = "Vert Slider, value = " + offsetFromStart;
            });

        yslider.subscribe("slideStart", function() {
                YAHOO.log("VERT slidestart", "warn");
            });

        yslider.subscribe("slideEnd", function() {
                // If you are only interested in the end value (when the
                // animation completes, or the user stops dragging the
                // slider handle), you can use this event rather than the
                // change event

                YAHOO.log("VERT slideend", "warn");
                // var val = this.getValue();
                // Dom.get(valFld).value = val;
                // Dom.get(bg).title = "Vert Slider, value = " + val;
            });

        Dom.get(valFld).title = "Type in slider value between 0 and 200.";

        Event.on(bg, "keydown", handleVertSliderKey);
        Event.on(bg, "keypress", Event.preventDefault);

    };

    var initHoriz = function() {

        var bg="horizBGDiv",thumb="horizHandleDiv",valFld="horizVal";

        xslider = YAHOO.widget.Slider.getHorizSlider(bg, 
                           thumb, 100, 100, 25);

        xslider.subscribe("change", function(offsetFromStart) {
                Dom.get(valFld).value = offsetFromStart;
                Dom.get(bg).title = "Horiz Slider, value = " + offsetFromStart;
            });

        xslider.subscribe("slideStart", function() {
                YAHOO.log("HORIZ slidestart", "warn");
            });

        xslider.subscribe("slideEnd", function() {
                // If you are only interested in the end value (when the
                // animation completes, or the user stops dragging the
                // slider handle), you can use this event rather than the
                // change event

                YAHOO.log("HORIZ slideend", "warn");
                // var val = this.getValue();
                // Dom.get(valFld).value = val;
                // Dom.get(bg).title = "Vert Slider, value = " + val;
            });


        Dom.get(valFld).title = "Type in slider value between -100 " +
            "and 100. Values will be rounded to a number divisable by 25."

        Event.on(bg, "keydown", handleHorizSliderKey);
        Event.on(bg, "keypress", Event.preventDefault);
    };

    return {
 
        init: function() {
            initVert(); initHoriz();
        },

        updateVert: function() {
            var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
            if ( isNaN(v) ) v = 0;
            yslider.setValue(Math.round(v));
            return false;
        },

        updateHoriz:function() {
            var fld = document.forms["formH"]["horizVal"];
            var v = parseFloat(fld.value, 10);
            if ( isNaN(v) ) v = 0;
            xslider.setValue(Math.round(v));
            var newVal = xslider.getValue();
            if (v != newVal) {
                fld.value = newVal;
            }
            return false;
        }

    }
}();

YAHOO.util.Event.on(window, "load", YAHOO.example.Sliders.init);
 //]]>
</script>

</body>
</html>
